<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .box div {
            width: 100px;
            height: 100px;
            outline: 1px solid black;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }

        .bg {
            background-color: pink;
        }

        #start {
            background-color: aqua;

        }
    </style>
</head>

<body>
    <div class="box">
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>电视机</div>
        <div id="start">开始抽奖</div>
        <div>谢谢参与</div>
        <div>电饭煲</div>
        <div>保温杯</div>
        <div>卫生纸</div>
    </div>

    <script>
        let min = document.querySelectorAll(".box div");
        let start = document.getElementById("start");

        function randomNumber(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }

        let indexArr = [0, 1, 2, 5, 8, 7, 6, 3]; //下标数组
        let i = 0; //表示下标数组的下标

        let stop;
        // 1.点击抽奖按钮
        // 2.中奖区域围绕抽奖按钮进行旋转（变速旋转：先慢，中间快，最后慢）
        // 注意：旋转表示轮到哪一个商品，就在对应的盒子里面添加bg类名，就会有粉色的背景颜色
        // 旋转方法:间隔指定时间，给盒子添加类名 （setInterval）
        // 3.停止旋转 (clearInterval)
        // 停止旋转的条件：1.时间法（10-15秒之间，随机时间）  2.次数法（60-80次之间，随机次数）
        function move(count) {
            let index = indexArr[i]; //表示min盒子下标
            // 全部的min盒子背景颜色都不是粉色（所有min盒子都没有bg的类名）
            for (let j = 0; j < min.length; j++) {
                min[j].classList.remove("bg");
            }
            min[index].classList.add("bg"); //当前盒子背景颜色为粉色
            i++;
            if (i == 8) {
                i = 0;
            }
            newCount++;
            console.log("旋转次数：", newCount);

            if (newCount >= 10 && newCount < count-10) {
                // 关闭上一轮计时器
                clearInterval(stop);
                // 开始新的计时器
                stop=setInterval(function(){
                    move(count);
                },100)
            } else if (newCount >= count-10) {
                // 关闭上一轮计时器
                clearInterval(stop);
                // 开始新的计时器
                stop=setInterval(function(){
                    move(count);
                },500)
            }
            // 4.当旋转次数和最开始指定的次数相同时，就停止旋转
            if (newCount == count) {
                clearInterval(stop);
                newCount = 0;
                i=0;
            }

        }



        let newCount = 0; //记录旋转次数
        // 详细步骤：
        // 1.点击抽奖按钮
        start.onclick = function () {
            // 2.获取60-80之间的随机旋转次数
            let count = randomNumber(60, 80);
            console.log("真实的的旋转次数：", count);
            // 控制中奖率：60-71之间的随机次数都是65次  60%是谢谢参与  30%是卫生纸 10%是
            if(count>=60 && count<=71){
                count=68;
            }else if(count>=72 && count<=77){
                count=69;
            }
            // 3.开始旋转，并记录旋转次数
            //   setInterval(回调函数，毫秒数)
            stop = setInterval(function(){
                console.log("传入的count次数：",count);
                move(count);
            }, 500);

        }
    </script>
</body>

</html>